import React, {useEffect} from 'react';

// import {getBannerList,getProList} from '../api/home'

// useSelector: 是用来获取全局状态的方法
// useDispatch: 是用来调用修改全局状态的方法
import { useSelector, useDispatch } from 'react-redux'


import {getBannerListAction, getProListAction} from '../store/modules/home'
const Home = () => {

  // 获取状态
  const bannerList = useSelector(state => state.home.bannerList)
  const proList = useSelector(state => state.home.proList)


  // 获取 dispatch
  const dispatch = useDispatch()


  useEffect(()=>{
    // 无参数不加 ()
    dispatch(getBannerListAction)
    // 有参数加 ()
    dispatch(getProListAction({limitNum: 8}))

  }, [dispatch])

  return (
    <div>
      Home
      <div>
        {bannerList &&  bannerList.map(item => {
          return (<img style={{width: 100}} src={item.img} key={item.bannerid} alt='' />)
        })}
      </div>

      <ol>
        { proList &&  proList.map(item => {
          return (<li key={item.proid}>{item.proname}</li>)
        })}
      </ol>
    </div>
  );
};

export default Home;
